<template>
	<view>
		<view class="confirm-order">


			<!-- 地址 -->
			<navigator v-if="goodsDetail.type==10" hover-class="none"
				url="/package_user/pages/user_address/index?type=1">
				<address-item :address="address" />
			</navigator>


			<view class="confirm-con">
				<!-- 商品信息 -->
				<view class="goods contain">
					<view class="lease-goods">
						<lease-order-goods :image="goodsDetail.image">
							<template #name>{{ goodsDetail.name }}</template>

							<template #price>

								<text>{{ goodsDetail.score }}</text>
							</template>
						</lease-order-goods>
					</view>


					<view class="item row-between">
						<view>留言</view>
						<u-input v-model="userRemark" class="flex1 ml20" :clearable="false"
							placeholder="请添加备注（150字以内）" />
					</view>
				</view>


			</view>

			<!-- 订单结算 -->
			<view class="footer bg-white fixed">

				<view class="row-between">
					<view class="all-price lg row">
						<text>合计：</text>
						<view class="ornament">
              {{goodsDetail.score}}积分
						</view>
					</view>
					<button class="btn br60 white" size="md" hover-class="none" @tap="onSubmitOrder">
						提交订单
					</button>
				</view>
			</view>
		</view>

		<loading-view v-if="showLoading" background-color="white" :size="50" />


		<!-- 支付密码 -->
		<set-pay-pwd ref="setPayPwd" @confirm="orderBuyFun" />


	</view>
</template>

<script>

  import {
    getScoreGoodsDetail,orderScoreBuy


  } from '@/api/scoregoods.js'
	import {
		mapGetters
	} from 'vuex'


	export default {
		data() {
			return {
        goods_id:0,
        goodsDetail:[],
				signimg: "1",
				showLoading: false,
				address: {}, // 当前地址信息
				orderInfo: {}, // 订单信息
				goods: {}, // 商品数据
				addressId: '', // 所选地址ID
				userRemark: '', // 留言




				isAgreeProtocol: false, // 协议是否同意
				showLeaseProtocol: false, // 协议 Popup
				protocolHtml: '', // 富文本协议内容

				isSelectShow: false, //选择框显示
				selectList: null, //选择框列表
				selectType: null, //选择框类型
				selectLabelName: null, //选择框label名

				shippint_type: null,

				location: {},
				isShowShppingWarn: false,

			};
		},

		computed: {


			...mapGetters(['agentInfo']),
		},

		methods: {

      // 获取商品信息
      getGoodsDetailFun() {


        getScoreGoodsDetail({
          id: this.goods_id,

        }).then(res => {
          if (res.code == 1) {
            const data = res.data;
            data.score=data.score.toString()
            this.goodsDetail = data;
            this.swiperList = [{id:0,uri:data.image}];
            this.comment = data.comment;
            this.goodsLike = data.like;

            if (!this.agentInfo)
              this.$store.commit('SETAGENTINFO', data.agent);

            this.$nextTick(() => {

              this.isFirstLoading = false

              // 滚动到顶部，防止h5端出现问题
              uni.pageScrollTo({
                scrollTop: 0,
                duration: 0,
              });
              // this.getRectInfo()
            });
          } else {
            this.isNull = true
            this.isFirstLoading = false;
          }
        });

      },

			/**
			 * 打开选择框
			 * @param {Object} type 列表字段
			 */
			openSelect(type) {
				this.selectType = type;
				this.selectList = this.orderInfo[type];
				if (this.selectType == 'write_off') {
					this.selectLabelName = 'msg';
				}
				this.isSelectShow = true;
			},
			/**
			 * 拨打电话
			 * @param tel 电话
			 */
			callPhone(tel) {
				uni.makePhoneCall({
					phoneNumber: tel
				})
			},
			/** 
			 * 打开地图
			 * @param {*} lat 经度
			 * @param {*} lon 纬度
			 */
			openMap(lat, lon) {
				uni.openLocation({
					latitude: Number(lat),
					longitude: Number(lon),
					fail(e) {
						console.log('调用地图失败:', e)
					}
				})
			},



			// 点击下单
			onSubmitOrder() {
				// if (!this.isAgreeProtocol)
				// 	return uni.showToast({
				// 		title: '请先阅读并同意协议',
				// 		icon: 'none'
				// 	});

				if ((!this.addressId)&&this.goodsDetail.type==10)
					return uni.showToast({
						title: '请选择收货地址',
						icon: 'none'
					});

				uni.showModal({
					title: '温馨提示',
					content: '是否确认下单?',
					confirmColor: '#FF2C3C',
					success: async res => {
						if (!res.confirm) return;

						// #ifdef MP-WEIXIN
						// await this.getAuthMsg();
						// #endif


							this.$refs.setPayPwd.hasPayWord().then(res => {
								this.$refs.setPayPwd.showInputPwd();
							});

					}
				});
			},

			// 下单处理
			orderBuyFun(password) {
				this.showLoading = true;
      console.log(password,444)
				const address = this.address;
      const data={
        address:address,
        goods_id:this.goods_id,
        password:password,
        user_remark:this.userRemark
      }
      orderScoreBuy(data).then(res => {
        this.showLoading = false;
        if (res.code != 1) {

          return this.$toast(res.msg);
        }
		uni.navigateTo({
			url: '/package_goods/pages/my_intgral_order/user_order'
		
		})
      });
			},

		},


		onLoad(options) {
      if (options && options.scene) {
        let scene = strToParams(decodeURIComponent(options.scene));
        console.log(scene, decodeURIComponent(options.scene))
        options.id = scene.id;
      }

      if (!options.id)
        return this.$toast({
          title: '缺少参数，无法查看商品'
        }, {
          tab: 3
        });

      this.goods_id = options.id || 0;
      this.getGoodsDetailFun();
			// 选择地址
			uni.$on("selectaddress", e => {
				const id = e.id;
				const address = e.address;

				this.addressId = e.id
				this.address = address;
			});
			uni.$on("selectsign", e => {
				this.signimg = e.signimg
			});
			// 获取付款方式
			// payment().then(res => {
			// 	if (res.code != 1) return;
			// 	const data = res.data;
			// 	this.payWayArr = data;
			// 	this.payWay = data.length ? data[0].pay_way : 0
			// });

			// 获取协议内容
			// getLeaseProtocol().then(res => {
			// 	console.log('协议内容>>', res);
			// 	if (res.code != 1) return;
			// 	this.protocolHtml = res.data || '';
			// });
		},

		onShow() {
			const data = this.payload;

			let _this = this;
			uni.getStorage({
				key: "City_lat",
				success: function(res) {
					_this.location.lat = res.data
					uni.getStorage({
						key: "City_lng",
						success: function(res) {
							_this.location.lng = res.data
							// leaseBuy({
							// 	lat: _this.location.lat,
							// 	lng: _this.location.lng,
							// 	address_id: _this.addressId,
							// 	agent_id: _this.agentInfo?.id,
              //
							// }).then(res => {
							// 	if (res.code != 1) return;
							// 	_this.showLoading = false;
							// 	const data = res.data;
							// 	_this.orderInfo = data;
							// 	_this.address = data.address;
							// 	_this.addressId = data?.address?.id || '';
							// 	_this.goods = data.goods_lists[0];
							// 	_this.curr_write_off = data.write_off[0]
							// 	_this.shippint_type = data.shipping_type;
							// 	_this.payWayArr = data.payment;
							// 	_this.couponList = data.coupon_list
							// 	_this.logisticsText = _this.logisticsText.replace(
							// 		'{money}', data.shipping.money)
							// 	_this.payWay = data.payment.length ? data.payment[0]
							// 		.pay_way : 0
							// 	_this.curr_shipping_type = _this.agentInfo.leixin == 3 ?
							// 		0 :
							// 		data.shipping_type.findIndex(
							// 			v => v.id == 2);
							// });
						}
					})
				}
			})

		},



	}
</script>
<style lang="scss">
	.contain {
		background-color: white;
		border-radius: 24rpx;
		margin-top: 20rpx;
	}

	.confirm-order .confirm-con {
		overflow: hidden;
		padding: 0 20rpx calc(126rpx + 20rpx + env(safe-area-inset-bottom));
	}

	.confirm-order .contain {
		margin-top: 20rpx;
		background-color: white;
		border-radius: 24rpx;
	}

	.confirm-order .img-line {
		height: 1.5px;
		width: 100%;
		display: block;
	}


	.confirm-order .coupons {
		height: 100rpx;
		padding: 0 24rpx;
	}

	.goods .title {
		padding: 22rpx 24rpx;
		border-bottom: 1px solid #F6F6F6;
	}

	.goods .all-num {
		padding: 22rpx 24rpx;
		border-bottom: 1px dotted #F6F6F6;
	}

	.lease-goods {
		padding: 24rpx 20rpx;
	}

	.confirm-order .footer {
		box-sizing: content-box;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 126rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		padding-top: 10rpx;
		padding-bottom: env(safe-area-inset-bottom);
	}


	.confirm-order .pay-way .title {
		padding: 20rpx 24rpx;
	}

	.confirm-order .pay-way .radio-group .item {
		height: 120rpx;
		padding: 0 24rpx;
	}

	.confirm-order .price {
		padding: 28rpx 20rpx;
	}

	.confirm-order .price .item:not(:last-of-type) {
		margin-bottom: 20rpx;
	}

	.confirm-order .goods>.item,
	.confirm-order .benefit>.item {
		padding: 0 24rpx;
		height: 80rpx;
	}

	.confirm-order .btn {
		background-color: #24A3FF;
		padding: 0 50rpx;
	}

	.confirm-order .van-cell:after {
		border: none;
	}

	.goods .shop-icon {
		width: 40rpx;
		height: 40rpx;
	}

	.pop-title {
		height: 100rpx;
		border-bottom: 1rpx solid #F2F2F2;
	}

	.pop-title .title {
		margin-left: 30rpx;
		font-size: 34rpx;
		font-weight: bold;
		line-height: 36rpx;
	}

	.periods-price {
		padding: 0 20rpx;
	}

	.periods-price-item {
		padding: 20rpx 0;
	}

	.periods-price-item:nth-child(n + 2) {
		border-top: 1px solid #E5E5E5;
	}

	.periods-price-title {
		padding: 10rpx 0;
		font-size: 30rpx;
		font-weight: 500;
		color: #333333;
	}

	.periods-price-row {
		padding: 10rpx 0;
		font-size: 26rpx;
	}


	.protocol {
		display: flex;
		flex-direction: column;
		width: 88vw;
		height: 88vh;
		padding: 20rpx;
		background-color: #FFFFFF;
	}

	.protocol-title {
		padding: 20rpx 0;
		font-size: 32rpx;
		font-weight: 500;
		text-align: center;
		color: #333333;
	}

	.protocol-content {
		flex: 1;
		overflow: scroll;
	}

	.protocol-confirm {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 72rpx;
		border-radius: 50px;
		margin-top: 20rpx;
		font-size: 32rpx;
		background-color: #24A3FF;
		color: #FFFFFF;
	}

	.send-store {
		padding: 32rpx 20rpx;

		.top-bar {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.title {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #373737;
				line-height: 32rpx;
			}
		}

		.store-info {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 28rpx;

			.goods-img {
				width: 160rpx;
				height: 160rpx;
				border-radius: 12rpx;
				overflow: hidden;
				margin-right: 20rpx;
				flex-shrink: 0;
				background: #eee;

				.img {
					width: 160rpx;
					height: 160rpx;
				}
			}

			.info-box {
				height: 160rpx;
				padding: 20rpx 0;
				flex: 1;
				overflow: hidden;
				display: flex;
				flex-direction: column;
				justify-content: space-around;

				.address {
					font-size: 32rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #666666;
					line-height: 32rpx;
				}

				.row {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.distance {
						display: flex;
						align-items: center;

						.text {
							font-size: 24rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							color: #1E8AF4;
							line-height: 24rpx;
							margin-left: 10rpx;
						}
					}

					.contact {
						display: flex;
						align-items: center;

						.icon {
							width: 24rpx;
							height: 24rpx;
							margin-right: 8rpx;
						}

						.text {
							font-size: 24rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							color: #333333;
							line-height: 24rpx;
						}

						.phone {
							width: 36rpx;
							height: 36rpx;
							margin-left: 16rpx;
						}
					}
				}

			}
		}
	}
</style>